<template>
  <div class="music-footer">
    <div class="footer-content">
      <div class="footer-top">
        <div class="footer-top-left">
          <h3>下载QQ音乐客户端</h3>
          <ul class="icon-list">
            <li>
              <a href="#">
                <i class="icon_pc"></i>
                PC版
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon_mac"></i>
                Mac版
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon_and"></i>
                Android版
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon_iph"></i>
                iPhone版
              </a>
            </li>
          </ul>
        </div>
        <div class="footer-top-center">
          <h3>特色产品</h3>
          <ul class="icon-list">
            <li>
              <a href="#">
                <i class="icon_pc"></i>
                全民K歌
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon_mac"></i>
                银河音效
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon_and"></i>
                QPlay
              </a>
            </li>
            <li>
              <a href="#">
                <i class="icon_iph"></i>
                Fan直播伴侣
              </a>
            </li>
          </ul>
        </div>
        <div class="footer-top-right">
          <h3>合作连接</h3>
          <ul class="icon-list3">
            <li>
              <a href="#"> CJ ENM</a>
            </li>
            <li>
              <a href="#"> 腾讯视频</a>
            </li>
            <li>
              <a href="#"> 手机QQ空间</a>
            </li>
            <li>
              <a href="#"> 最新版QQ</a>
            </li>
            <li>
              <a href="#"> 腾讯社交广告</a>
            </li>
            <li>
              <a href="#"> 电脑管家</a>
            </li>
            <li>
              <a href="#"> QQ浏览器</a>
            </li>
            <li>
              <a href="#"> 腾讯微云</a>
            </li>
            <li>
              <a href="#"> 腾讯云</a>
            </li>
            <li>
              <a href="#"> 企鹅FM</a>
            </li>
            <li>
              <a href="#"> 智能电视</a>
            </li>
            <li>
              <a href="#"> 当贝市场</a>
            </li>
            <li>
              <a href="#"> 酷我音乐</a>
            </li>
            <li>
              <a href="#"> 酷狗听书</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="footer_copyright">
          <p>
            <a
              href="http://www.tencent.com/"
              rel="noopener noreferrer"
              target="_blank"
              title="关于腾讯"
              >关于腾讯</a
            >
            |<a
              href="http://www.tencent.com/index_e.shtml"
              rel="noopener noreferrer"
              target="_blank"
              title="About Tencent"
              >About Tencent</a
            >
            |<a
              href="http://www.qq.com/contract.shtml"
              rel="noopener noreferrer"
              target="_blank"
              title="服务条款"
              >服务条款</a
            >
            |<a
              href="http://y.qq.com/y/static/tips/service_tips.html"
              rel="noopener noreferrer"
              target="_blank"
              title="用户服务协议"
              >用户服务协议</a
            >
            |<a
              href="https://y.qq.com/m/client/intro/privacy.html"
              rel="noopener noreferrer"
              target="_blank"
              title="隐私政策"
              >隐私政策</a
            >
            |<a
              href="https://y.qq.com/vip/right_declare/index.html"
              rel="noopener noreferrer"
              target="_blank"
              title="权利声明"
              >权利声明</a
            >
            |<a
              href="http://www.tencentmind.com/"
              rel="noopener noreferrer"
              target="_blank"
              title="广告服务"
              >广告服务</a
            >
            |<a
              href="http://hr.tencent.com/"
              rel="noopener noreferrer"
              target="_blank"
              title="腾讯招聘"
              >腾讯招聘</a
            >
            |<a
              href="https://y.qq.com/m/client/helper/pc.html"
              rel="noopener noreferrer"
              target="_blank"
              title="客服中心"
              >客服中心</a
            >
            |<a
              href="http://www.qq.com/map/"
              rel="noopener noreferrer"
              target="_blank"
              title="网站导航"
              >网站导航</a
            >
            |<a title="举报中心">举报中心</a>
          </p>
          <p>
            Copyright © 1998 - 2022 Tencent.
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="http://www.tencent.com/en-us/le/copyrightstatement.shtml"
              title="All Rights Reserved."
              >All Rights Reserved.</a
            >
          </p>
          <p>
            腾讯公司
            <a
              target="_blank"
              href="http://www.tencent.com/zh-cn/le/copyrightstatement.shtml"
              rel="noopener noreferrer"
              title="版权所有"
              >版权所有</a
            >｜<a
              target="_blank"
              href="https://y.qq.com/music/common/upload/t_cm3_photo_publish/4055034.jpg"
              rel="noopener noreferrer"
              title="营业执照"
              >营业执照</a
            >｜网络文化经营许可证：<a
              target="_blank"
              href="https://y.qq.com/music/common/upload/t_cm3_photo_publish/4043272.jpg"
              rel="noopener noreferrer"
              title="粤网文[2020]3396-195号"
              >粤网文[2020]3396-195号</a
            >｜客服电话：<a href="tel:4006016666" title="客服电话">4006016666</a
            >｜违法与不良信息举报邮箱：<a
              href="mailto:tme_musicjubao@tencentmusic.com"
              title="违法与不良信息举报邮箱"
              >tme_musicjubao@tencentmusic.com</a
            >
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'MusicFooter',
}
</script>

<script lang="ts" setup>
import { onMounted } from 'vue'

onMounted(() => {
  const icons = document.querySelectorAll<any>('.icon-list i')
  let offsetX = 0
  for (let i = 0; i < icons.length; i++) {
    icons[i].style.backgroundPositionX = -offsetX + 'px'
    offsetX += 92
  }
})
</script>

<style scoped>
.music-footer {
  background-color: #333333;
  color: #969696;
}
.footer-content {
  width: 1200px;
  margin: 0 auto;
}
.music-footer a {
  color: #969696;
}
.footer-top {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
.footer-top h3 {
  font-size: 16px;
  font-weight: normal;
  padding: 80px 0 30px 0;
}
.icon-list {
  display: flex;
  font-size: 13px;
  margin-left: -20px;
  margin-right: 50px;
}
.icon-list li {
  text-align: center;
}
.icon-list li:hover a {
  color: #31c27c;
}
.icon-list li:hover i {
  background-position-y: -49px;
}
.icon-list i {
  display: block;
  height: 48px;
  width: 48px;
  background-image: url('./imgs/footer.png');
  margin: 0 29px 12px;
}
.icon-list3 {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  justify-content: space-between;
}
.icon-list3 li {
  width: 100px;
  font-size: 14px;
  margin-bottom: 12px;
}
.icon-list3 li a:hover {
  color: #31c27c;
}
.footer-bottom {
  font-size: 12px;
  padding: 50px 0;
  border-top: solid 1px #353535;
}
.footer-bottom p {
  text-align: center;
}
</style>
